<template>
  <div class="home_container">
    <Header/>
    <Sort/>
    <div class="home_list_container">
      <Store v-for="(item,index) in list"
      :key="index"
      :item="item"/>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from "../components/Header";
import Sort from "../components/Sort";
import Store from "../components/Store";

export default {
  name: 'Home',
  components: {
    Header,
    Sort,
    Store
  },
  computed:{
    list:function(){
      return  this.$store.state.listModule.list;
    }
  },
  mounted(){
    this.$store.dispatch("listModule/INIT_DATA");
  }
}
</script>


<style scoped>
.home_list_container
{
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background-color: rgb(237, 237, 237);
}
</style>